@pexip/components

Enumerations

Interfaces

Type Aliases

ActivityCardAction

Ƭ ActivityCardAction: Object

Type declaration

Name	Type
`action?`	() => `void`
`label`	`string`

AlignWithFloatRootTrigger

Ƭ AlignWithFloatRootTrigger: React.MutableRefObject<() => void | null>

AllSize

Ƭ AllSize: typeof allSizesValues[number]

AriaMenuItem

Ƭ AriaMenuItem: Object

The structure of a menu item that can be used to create a dropdown menu.

Type declaration

Name	Type	Description
`alternativeHoverClassName?`	`string`	Class name that is used to override the default hover style.
`alternativeHoverStyle?`	`CSSProperties`	Style that is used to override the default hover style.
`className?`	`string`	The class name for the item.
`closeMenuOnItemClick?`	`boolean`	If set to false, the menu will not close when the user clicks this item.
`icon?`	`ReactElement`<typeof `Icon`>	The icon to display next to the item.
`key`	`string`	The unique key for the item.
`label`	`string`	The label of the item.
`onItemClick?`	() => `void`	If set, this function will be called when the user clicks this item.
`style?`	`CSSProperties`	The style for the item.
`testId?`	`string`	The test id for the item.

BackgroundImageSrc

Ƭ BackgroundImageSrc: string | BreakpointImageSet

BadgeCounterProps

Ƭ BadgeCounterProps: React.ComponentProps<typeof BadgeCounter>

BadgeCounterVariant

Ƭ BadgeCounterVariant: typeof badgeCounterVariantValues[number]

BaseSizeModifier

Ƭ BaseSizeModifier: typeof baseSizeModifiersValues[number]

BreadcrumbItem

Ƭ BreadcrumbItem: Object

Type declaration

Name	Type
`label`	`string`
`url?`	`string`

ButtonHTMLTag

Ƭ ButtonHTMLTag: "button" | "a"

ButtonModifiersValues

Ƭ ButtonModifiersValues: typeof buttonModifiersValues[number]

ButtonProps

Ƭ ButtonProps: React.ComponentProps<typeof Button>

ButtonTextProps

Ƭ ButtonTextProps: React.ComponentProps<typeof ButtonText>

ButtonVariant

Ƭ ButtonVariant: typeof buttonVariantsValues[number]

ColorScheme

Ƭ ColorScheme: typeof colorSchemeValues[number]

DropContentPosition

Ƭ DropContentPosition: typeof dropContentPosition[number]

DropContentType

Ƭ DropContentType: (fn: (e: React.SyntheticEvent<HTMLElement>) => void) => React.ReactNode | React.ReactNode | string

ExtendedSizeModifier

Ƭ ExtendedSizeModifier: typeof extendedSizeModifiersValues[number]

ExtendedTooltipPosition

FullSizeWindowBackgroundVariant

Ƭ FullSizeWindowBackgroundVariant: typeof fullSizeWindowBackgroundVariantsValues[number]

FullSizeWindowColorBackgroundProps

Ƭ FullSizeWindowColorBackgroundProps: Object

Type declaration

Name	Type
`background?`	`FullSizeWindowBackgroundVariant`
`backgroundBlendMode?`	`never`
`backgroundImageSrc?`	`never`
`overlay?`	`never`
`overlayOpacity?`	`never`

FullSizeWindowImageBackgroundProps

Ƭ FullSizeWindowImageBackgroundProps: Object

Type declaration

Name	Type
`background`	`"image"`
`backgroundBlendMode?`	`BlendMode`
`backgroundImageSrc`	`BackgroundImageSrc`
`overlay?`	`ColorScheme`
`overlayOpacity?`	`OverlayOpacity`

GroupProps

Ƭ GroupProps: React.ComponentProps<typeof Group>

HeadingElement

Ƭ HeadingElement: typeof headingElementsValues[number]

HeadingFontVariant

Ƭ HeadingFontVariant: typeof headingFontVariantsValues[number]

IScrollbars

Ƭ IScrollbars: SimpleBarCore

ImageSrc

Ƭ ImageSrc: string | SrcSet

InlineElement

Ƭ InlineElement: typeof inlineElementsValues[number]

InputVariant

Ƭ InputVariant: typeof inputVariantsValues[number]

InteractiveElementHTMLTag

Ƭ InteractiveElementHTMLTag: "button" | "a" | "div"

InteractiveElementProps

Ƭ InteractiveElementProps: React.ComponentProps<typeof InteractiveElement>

LabelModifier

Ƭ LabelModifier: typeof labelModifierValues[number]

LinkTarget

Ƭ LinkTarget: typeof linkTargetsValues[number]

LogoSizeModifier

Ƭ LogoSizeModifier: typeof logoSizeModifiersValues[number]

MenuAction

Ƭ MenuAction: Object

Type declaration

Name	Type
`enhancerStart?`	`React.ReactNode`
`isDisabled?`	`boolean`
`isLoading?`	`boolean`
`label`	`string`
`onClick?`	() => `void`
`target?`	`LinkTarget`
`testId?`	`string`
`url?`	`string`
`variant?`	`ButtonVariant`

MenuContent

Ƭ MenuContent: MenuItem[][]

MenuItem

Ƭ MenuItem: Object

Type declaration

Name	Type
`clickAction?`	`React.MouseEventHandler`<`HTMLElement`>
`colorScheme?`	`ColorScheme`
`icon?`	`IconSource`
`iconColor?`	`string`
`isAriaChecked?`	`boolean`
`isAriaSelected?`	`boolean`
`isDisabled?`	`boolean`
`isFixedIcon?`	`boolean`
`label`	`React.ReactNode`
`linkWrapper?`	(`{

    children,
}`: { `children`: `React.ReactNode`  }) => `React.ReactElement` |

ModalProps

Ƭ ModalProps: React.ComponentProps<typeof Modal>

ModalSizeModifier

Ƭ ModalSizeModifier: typeof modalSizeModifiersValues[number]

MultiselectOption

Ƭ MultiselectOption: Option & { isHidden?: boolean }

MultistepIndicatorProps

Ƭ MultistepIndicatorProps: React.ComponentProps<typeof MultistepIndicator>

NotificationToastMessage

Ƭ NotificationToastMessage: Object

Type declaration

Name	Type	Description
`colorScheme?`	`ColorScheme`	-
`enhanceStart?`	`React.ReactNode`	-
`isClickable?`	`boolean`	-
`isDanger?`	`boolean`	-
`isInterrupt?`	`boolean`	A toast that can interrupt will jump the queue and remove the currently rendering toast and be rendered instead of it. Currently rendering toasts that have a timeout of 0 cannot be interrupted, the toast that tries to interrupt it is discarded and not queued. An example when this can be useful: if many toasts are sent rapidly in response to UI state changes; User mutes, unmute & mutes again and toasts are displayed to reflect these states, the toasts will display without a long timeout between each.
`message`	`ReactNode`	-
`onDismiss?`	() => `void`	-
`position?`	`ToastPosition`	-
`testid?`	`string`	-
`timeout?`	`number`	-

NotificationToastSignal

Ƭ NotificationToastSignal: NotificationToastMessageSignal | NotificationToastCloseSignal

NotificationTooltipPosition

Option

Ƭ Option: Object

Type declaration

Name	Type
`id`	`string`
`isDisabled?`	`boolean`
`label`	`string`

OverlayOpacity

Ƭ OverlayOpacity: 0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1

SelectProps

Ƭ SelectProps: React.ComponentProps<typeof Select>

ShadowModifier

Ƭ ShadowModifier: typeof shadowModifierValues[number]

SimpleButtonProps

Ƭ SimpleButtonProps: React.ComponentProps<typeof SimpleButton>

SizeModifier

Ƭ SizeModifier: typeof sizeModifiersValues[number]

StandardSizeModifier

Ƭ StandardSizeModifier: typeof standardSizeModifiersValues[number]

StatIndicatorVariant

Ƭ StatIndicatorVariant: typeof statIndicatorVariantValues[number]

StatusItem

Ƭ StatusItem: Object

Type declaration

Name	Type
`content`	`string`
`label`	`string`

TableResultsCountProps

Ƭ TableResultsCountProps: Object

Type declaration

Name	Type
`endCount`	`number`
`isDisabled?`	`boolean`
`startCount`	`number`
`totalCount`	`number`

TagItem

Ƭ TagItem: Object

Type declaration

Name	Type	Description
`className?`	`string`	-
`isInteractive?`	`boolean`	isInteractive decides whether hover effect will be on or off
`isTruncated?`	`boolean`	-
`label?`	`string`	-
`onClick?`	(`label?`: `string`) => `void`	-
`onRemove?`	() => `void`	-
`removeLabel?`	`string`	-
`title?`	`string`	-
`variant?`	`TextVariant`	-

TextLinkProps

Ƭ TextLinkProps: React.ComponentProps<typeof TextLink>

TextProps

Ƭ TextProps: React.ComponentProps<typeof Text>

TextVariant

Ƭ TextVariant: typeof textVariantsValues[number]

ToastPosition

Ƭ ToastPosition: typeof toastPositionValues[number]

TooltipPosition

Ƭ TooltipPosition: typeof TooltipPositionValue[number]

VideoWrapperSizeModifier

Ƭ VideoWrapperSizeModifier: typeof videoWrapperSizeModifiersValues[number]

VideoWrapperVariant

Ƭ VideoWrapperVariant: typeof videoWrapperVariantsValues[number]

Variables

IconTypes

• Const IconTypes: IconCollection

TooltipPositionValue

• Const TooltipPositionValue: readonly ["bottom", "bottomLeft", "bottomRight", "bottomStart", "endBottom", "left", "right", "top", "topLeft", "topRight", "topStart"]

breakpoints

• Const breakpoints: Object

Type declaration

Name	Type
`lg`	`number`
`md`	`number`
`sm`	`number`
`xl`	`number`
`xs`	`number`

notificationToastSignal

• Const notificationToastSignal: Signal<NotificationToastSignal>

Functions

AboutModal

▸ AboutModal(props, context?): null | ReactElement<any, any>

Parameters

Name Type

props ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { canDrag?: boolean ; closeButtonAriaLabel?: string ; closeOnOutsideClick?: boolean ; colorScheme?: "dark" | "light" ; hasBackground?: boolean ; isOpen: boolean ; modalType?: ModalType ; onClose?: () => void ; padding?: "small" | "medium" | "compact" | "large" | "none" ; scrollbarsAriaLabel?: string ; sizeModifier?: "small" | "medium" | "compact" | "large" | "auto" ; testIdCloseButton?: string ; uniqueTitle?: string ; withCloseButton?: boolean ; withMask?: boolean ; withScrollbars?: boolean ; wrapperClassName?: string } & Pick<Omit<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { bgColor?: string ; colorScheme?: "dark" | "light" ; footerContent?: ReactElement<any, string | JSXElementConstructor<any>> ; footerPadding?: "small" | "medium" | "compact" | "large" | "none" ; hasBackground?: boolean ; headerContent?: ReactElement<any, string | JSXElementConstructor<any>> ; headerPadding?: "small" | "medium" | "compact" | "large" | "none" ; isRounded?: boolean ; isWithBorder?: boolean ; isWithShadow?: boolean ; padding?: "small" | "medium" | "compact" | "large" | "none" ; shadowModifier?: "dark" | "light" } & Pick<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { hasFooterShadow?: boolean ; padding?: "small" | "medium" | "compact" | "large" | "none" }, "hasFooterShadow">, "ref"> & RefAttributes<HTMLDivElement>, "hasFooterShadow" | "headerContent" | "footerContent" | "headerPadding" | "footerPadding"> & { aboutTextEnhancerEnd?: ReactNode ; headingText?: string ; isOpen: boolean ; onClose: (e: SyntheticEvent<Element, Event>) => void ; privacyPolicyLinkText?: string ; privacyPolicyUrl?: string ; termsOfServiceLinkText?: string ; termsOfServiceUrl?: string ; version: string }

context? any

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `canDrag?`: `boolean` ; `closeButtonAriaLabel?`: `string` ; `closeOnOutsideClick?`: `boolean` ; `colorScheme?`: `"dark"` \| `"light"` ; `hasBackground?`: `boolean` ; `isOpen`: `boolean` ; `modalType?`: `ModalType` ; `onClose?`: () => `void` ; `padding?`: `"small"` \| `"medium"` \| `"compact"` \| `"large"` \| `"none"` ; `scrollbarsAriaLabel?`: `string` ; `sizeModifier?`: `"small"` \| `"medium"` \| `"compact"` \| `"large"` \| `"auto"` ; `testIdCloseButton?`: `string` ; `uniqueTitle?`: `string` ; `withCloseButton?`: `boolean` ; `withMask?`: `boolean` ; `withScrollbars?`: `boolean` ; `wrapperClassName?`: `string` } & `Pick`<`Omit`<`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `bgColor?`: `string` ; `colorScheme?`: `"dark"` \| `"light"` ; `footerContent?`: `ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`>> ; `footerPadding?`: `"small"` \| `"medium"` \| `"compact"` \| `"large"` \| `"none"` ; `hasBackground?`: `boolean` ; `headerContent?`: `ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`>> ; `headerPadding?`: `"small"` \| `"medium"` \| `"compact"` \| `"large"` \| `"none"` ; `isRounded?`: `boolean` ; `isWithBorder?`: `boolean` ; `isWithShadow?`: `boolean` ; `padding?`: `"small"` \| `"medium"` \| `"compact"` \| `"large"` \| `"none"` ; `shadowModifier?`: `"dark"` \| `"light"` } & `Pick`<`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `hasFooterShadow?`: `boolean` ; `padding?`: `"small"` \| `"medium"` \| `"compact"` \| `"large"` \| `"none"` }, `"hasFooterShadow"`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>, `"hasFooterShadow"` \| `"headerContent"` \| `"footerContent"` \| `"headerPadding"` \| `"footerPadding"`> & { `aboutTextEnhancerEnd?`: `ReactNode` ; `headingText?`: `string` ; `isOpen`: `boolean` ; `onClose`: (`e`: `SyntheticEvent`<`Element`, `Event`>) => `void` ; `privacyPolicyLinkText?`: `string` ; `privacyPolicyUrl?`: `string` ; `termsOfServiceLinkText?`: `string` ; `termsOfServiceUrl?`: `string` ; `version`: `string` }
`context?`	`any`

Returns

null | ReactElement<any, any>

AboutText

▸ AboutText(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	{ `enhancerEnd?`: `ReactNode` ; `headingText?`: `string` ; `privacyPolicyLinkText?`: `string` ; `privacyPolicyUrl?`: `string` ; `termsOfServiceLinkText?`: `string` ; `termsOfServiceUrl?`: `string` ; `version`: `string` } & `ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `spacing?`: `"small"` \| `"medium"` \| `"compact"` \| `"large"` \| `"none"` }
`context?`	`any`

Returns

null | ReactElement<any, any>

Accordion

▸ Accordion(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.buttonClassName?`	`string`
`props.canOnlyToggleWithTitle?`	`boolean`
`props.children`	`ReactNode`
`props.className?`	`string`
`props.colorScheme?`	`"dark"` \| `"light"`
`props.contentClassName?`	`string`
`props.dataTestId?`	`string`
`props.enhancerEnd?`	`ReactNode`
`props.isExpanded?`	`boolean`
`props.meta?`	`ReactNode`
`props.onToggle?`	(`isOpen`: `boolean`) => `void`
`props.title`	`ReactNode`
`context?`	`any`

Returns

null | ReactElement<any, any>

ActionsRow

▸ ActionsRow(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Omit`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>, `HTMLDivElement`>, `"title"`> & { `children?`: `ReactNode` ; `className?`: `string` ; `colorScheme?`: `"dark"` \| `"light"` ; `subtitle?`: `string` ; `title`: `ReactNode` }
`context?`	`any`

Returns

null | ReactElement<any, any>

ActivityCard

▸ ActivityCard(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.actionButton`	`ActivityCardAction`
`props.disabled?`	`boolean`
`props.eventsItems`	`ActivityCardAction`[]
`props.eventsTitle`	`string`
`props.statusItems`	`StatusItem`[]
`props.title`	`string`
`props.titleEnhancerStart?`	`ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`>>
`context?`	`any`

Returns

null | ReactElement<any, any>

AriaMenu

▸ AriaMenu(props, context?): null | ReactElement<any, any>

AriaMenu component represents a dropdown menu.

Parameters

Name	Type	Description
`props`	`Object`	-
`props.button`	`ReactElement`<`FC`<`Object`>, `string` \| `JSXElementConstructor`<`any`>>	The button component that triggers the menu.
`props.colorScheme?`	`"dark"` \| `"light"`	The color scheme for the menu.
`props.items`	`AriaMenuItem`[]	An array of menu items.
`props.onOpenChange?`	(`isOpen`: `boolean`) => `void`	Callback function called when the menu open state changes.
`props.popoverOffset?`	`number`	The offset for the popover.
`props.popoverPlacement?`	`Placement`	The placement of the popover.
`props.testId?`	`string`	The test id for the menu.
`context?`	`any`	-

Returns

null | ReactElement<any, any>

AspectRatio

▸ AspectRatio(props, context?): null | ReactElement<any, any>

A wrapper that makes its children element bound to an aspect ratio. Default ration is 16:9, {width: 16, height: 9}

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `dimensions?`: `Dimensions` ; `isActive?`: `boolean` }
`context?`	`any`

Returns

null | ReactElement<any, any>

Audio

▸ Audio(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLAudioElement`> & `AudioHTMLAttributes`<`HTMLAudioElement`> & { `captionsSrc?`: `string` ; `captionsSrcLang?`: `string` ; `controls?`: `boolean` ; `onFailure?`: (`reason`: `unknown`) => `void` ; `onSuccess?`: (`audio`: `null` \| `HTMLAudioElement`) => `void` ; `play?`: `boolean` ; `sinkId?`: `string` ; `src?`: `string` ; `srcObject?`: `MediaStream` }
`context?`	`any`

Returns

null | ReactElement<any, any>

Avatar

▸ Avatar(props, context?): null | ReactElement<any, any>

Parameters

Name Type

props HTMLProps<HTMLDivElement> & { alt?: string ; className?: string ; fontVariant?: FontVariant ; iconSize?: "small" | "medium" | "compact" | "mini" ; iconType?: IconSource ; imageUrl?: string ; isActive?: boolean ; text?: string ; textVariant?: "danger" | "success" | "standard" | "hidden" | "warning" | "tinted" | "subtle" | "disabled" | "inherit" | "link" ; title?: string } & { colorScheme?: "dark" | "light" ; displayName?: string ; isActive?: boolean ; modifier?: RoundIndicatorModifier ; number?: number ; sizeModifier?: "small" | "medium" | "compact" | "large" ; type: AvatarType }

context? any

Name	Type
`props`	`HTMLProps`<`HTMLDivElement`> & { `alt?`: `string` ; `className?`: `string` ; `fontVariant?`: `FontVariant` ; `iconSize?`: `"small"` \| `"medium"` \| `"compact"` \| `"mini"` ; `iconType?`: `IconSource` ; `imageUrl?`: `string` ; `isActive?`: `boolean` ; `text?`: `string` ; `textVariant?`: `"danger"` \| `"success"` \| `"standard"` \| `"hidden"` \| `"warning"` \| `"tinted"` \| `"subtle"` \| `"disabled"` \| `"inherit"` \| `"link"` ; `title?`: `string` } & { `colorScheme?`: `"dark"` \| `"light"` ; `displayName?`: `string` ; `isActive?`: `boolean` ; `modifier?`: `RoundIndicatorModifier` ; `number?`: `number` ; `sizeModifier?`: `"small"` \| `"medium"` \| `"compact"` \| `"large"` ; `type`: `AvatarType` }
`context?`	`any`

Returns

null | ReactElement<any, any>

BadgeCounter

▸ BadgeCounter(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `children`: `ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`>> ; `isTruncated?`: `boolean` ; `isVisible`: `boolean` ; `number`: `number` ; `shouldAnimate?`: `boolean` ; `variant?`: `"info"` \| `"notification"` }
`context?`	`any`

Returns

null | ReactElement<any, any>

Bar

▸ Bar(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `flexDirection?`: `"column"` \| `"row"` \| `"rowReverse"` \| `"columnReverse"` ; `justifyContent?`: `"center"` \| `"spaceBetween"` ; `padding?`: `"small"` \| `"medium"` \| `"compact"` \| `"large"` \| `"none"` ; `position?`: `"relative"` \| `"absoluteTop"` \| `"absoluteBottom"` }
`context?`	`any`

Returns

null | ReactElement<any, any>

Box

▸ Box(props): null | ReactElement<any, string | JSXElementConstructor<any>>

Parameters

Name Type

props Omit<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { bgColor?: string ; colorScheme?: "dark" | "light" ; footerContent?: ReactElement<any, string | JSXElementConstructor<any>> ; footerPadding?: "small" | "medium" | "compact" | "large" | "none" ; hasBackground?: boolean ; headerContent?: ReactElement<any, string | JSXElementConstructor<any>> ; headerPadding?: "small" | "medium" | "compact" | "large" | "none" ; isRounded?: boolean ; isWithBorder?: boolean ; isWithShadow?: boolean ; padding?: "small" | "medium" | "compact" | "large" | "none" ; shadowModifier?: "dark" | "light" } & Pick<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { hasFooterShadow?: boolean ; padding?: "small" | "medium" | "compact" | "large" | "none" }, "hasFooterShadow">, "ref"> & RefAttributes<HTMLDivElement>

Name	Type
`props`	`Omit`<`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `bgColor?`: `string` ; `colorScheme?`: `"dark"` \| `"light"` ; `footerContent?`: `ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`>> ; `footerPadding?`: `"small"` \| `"medium"` \| `"compact"` \| `"large"` \| `"none"` ; `hasBackground?`: `boolean` ; `headerContent?`: `ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`>> ; `headerPadding?`: `"small"` \| `"medium"` \| `"compact"` \| `"large"` \| `"none"` ; `isRounded?`: `boolean` ; `isWithBorder?`: `boolean` ; `isWithShadow?`: `boolean` ; `padding?`: `"small"` \| `"medium"` \| `"compact"` \| `"large"` \| `"none"` ; `shadowModifier?`: `"dark"` \| `"light"` } & `Pick`<`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `hasFooterShadow?`: `boolean` ; `padding?`: `"small"` \| `"medium"` \| `"compact"` \| `"large"` \| `"none"` }, `"hasFooterShadow"`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>

Returns

null | ReactElement<any, string | JSXElementConstructor<any>>

BoxHeader

▸ BoxHeader(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `padding?`: `"small"` \| `"medium"` \| `"compact"` \| `"large"` \| `"none"` }
`context?`	`any`

Returns

null | ReactElement<any, any>

Breadcrumbs

▸ Breadcrumbs(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.className?`	`string`
`props.crumbs`	`BreadcrumbItem`[]
`props.handleNavigate`	(`url?`: `string`) => `void`
`context?`	`any`

Returns

null | ReactElement<any, any>

Button

▸ Button(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`context?`	`any`

Returns

null | ReactElement<any, any>

ButtonText

▸ ButtonText(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`context?`	`any`

Returns

null | ReactElement<any, any>

CakeTimer

▸ CakeTimer(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`SVGProps`<`SVGSVGElement`> & { `duration?`: `number` }
`context?`	`any`

Returns

null | ReactElement<any, any>

CallToAction

▸ CallToAction(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`context?`	`any`

Returns

null | ReactElement<any, any>

Captions

▸ Captions(props): null | ReactElement<any, string | JSXElementConstructor<any>>

Parameters

Name	Type
`props`	{ `captions?`: `string` ; `className?`: `string` } & `RefAttributes`<`HTMLSpanElement`>

Returns

null | ReactElement<any, string | JSXElementConstructor<any>>

CardLayout

▸ CardLayout(props, context?): null | ReactElement<any, any>

Parameters

Name Type

props PropsWithChildren<{ colorScheme?: "dark" | "light" ; secondaryComponent: ReactElement<any, string | JSXElementConstructor<any>> ; subtitle?: string | ReactElement<any, string | JSXElementConstructor<any>> ; title: string ; titleEnhancerStart?: ReactElement<any, string | JSXElementConstructor<any>> ; titleHtmlTag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" }>

context? any

Name	Type
`props`	`PropsWithChildren`<{ `colorScheme?`: `"dark"` \| `"light"` ; `secondaryComponent`: `ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`>> ; `subtitle?`: `string` \| `ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`>> ; `title`: `string` ; `titleEnhancerStart?`: `ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`>> ; `titleHtmlTag?`: `"h1"` \| `"h2"` \| `"h3"` \| `"h4"` \| `"h5"` \| `"h6"` }>
`context?`	`any`

Returns

null | ReactElement<any, any>

Cell

▸ Cell(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `hasVerticalGutter?`: `boolean` ; `lg?`: `Cells` ; `lgOffset?`: `Cells` ; `md?`: `Cells` ; `mdOffset?`: `Cells` ; `sm?`: `Cells` ; `smOffset?`: `Cells` ; `xl?`: `Cells` ; `xlOffset?`: `Cells` ; `xs?`: `Cells` ; `xsOffset?`: `Cells` }
`context?`	`any`

Returns

null | ReactElement<any, any>

CenterLayout

▸ CenterLayout(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `centerText?`: `boolean` ; `isFullWidth?`: `boolean` ; `position?`: `"absolute"` \| `"relative"` }
`context?`	`any`

Returns

null | ReactElement<any, any>

Checkbox

▸ Checkbox(props): null | ReactElement<any, string | JSXElementConstructor<any>>

Parameters

Name	Type
`props`	`Omit`<`CheckboxProps`, `"ref"`> & `RefAttributes`<`HTMLInputElement`>

Returns

null | ReactElement<any, string | JSXElementConstructor<any>>

CircleCountDown

▸ CircleCountDown(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.msInterval?`	`number`
`props.shouldStartCountDown?`	`boolean`
`props.startCountFrom?`	`number`
`context?`	`any`

Returns

null | ReactElement<any, any>

ColorPickerPreviewButton

▸ ColorPickerPreviewButton(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Omit`<`DetailedHTMLProps`<`InputHTMLAttributes`<`HTMLInputElement`>, `HTMLInputElement`>, `"onChange"` \| `"type"`> & { `defaultValue?`: `string` ; `label`: `string` ; `onChange`: (`value`: `string`) => `void` }
`context?`	`any`

Returns

null | ReactElement<any, any>

ColorPreviewButton

▸ ColorPreviewButton(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`PropsWithChildren`<`Object`>
`context?`	`any`

Returns

null | ReactElement<any, any>

ConfirmableMultiselect

▸ ConfirmableMultiselect(props, context?): null | ReactElement<any, any>

Parameters

Name Type

props Omit<{ className?: string ; colorScheme?: "dark" | "light" ; dropContentPosition?: "topRight" | "topLeft" | "bottomRight" | "bottomLeft" | "topMiddle" | "bottomMiddle" | "middleLeft" | "middleRight" ; errorText?: string ; hasError?: boolean ; iconType?: IconSource ; isDisabled?: boolean ; isFullWidth?: boolean ; isOpen?: boolean ; isTruncated?: boolean ; label: string ; labelModifier?: "hidden" | "inline" ; menuComponent: DropContentType ; multipleSelectionText?: string ; noSelectionText?: string ; onContentVisibilityChange?: (isVisible: boolean) => void ; onOutsideClose?: () => void ; options: MultiselectOption[] ; sizeModifier?: "small" | "medium" | "compact" ; testId?: string ; value: undefined | string[] ; wrapContent?: boolean }, "menuComponent"> & { menuTestId?: string ; onConfirm: (selection: MultiselectOption[]) => void ; onContentVisibilityChange?: (isVisible: boolean) => void }

context? any

Name	Type
`props`	`Omit`<{ `className?`: `string` ; `colorScheme?`: `"dark"` \| `"light"` ; `dropContentPosition?`: `"topRight"` \| `"topLeft"` \| `"bottomRight"` \| `"bottomLeft"` \| `"topMiddle"` \| `"bottomMiddle"` \| `"middleLeft"` \| `"middleRight"` ; `errorText?`: `string` ; `hasError?`: `boolean` ; `iconType?`: `IconSource` ; `isDisabled?`: `boolean` ; `isFullWidth?`: `boolean` ; `isOpen?`: `boolean` ; `isTruncated?`: `boolean` ; `label`: `string` ; `labelModifier?`: `"hidden"` \| `"inline"` ; `menuComponent`: `DropContentType` ; `multipleSelectionText?`: `string` ; `noSelectionText?`: `string` ; `onContentVisibilityChange?`: (`isVisible`: `boolean`) => `void` ; `onOutsideClose?`: () => `void` ; `options`: `MultiselectOption`[] ; `sizeModifier?`: `"small"` \| `"medium"` \| `"compact"` ; `testId?`: `string` ; `value`: `undefined` \| `string`[] ; `wrapContent?`: `boolean` }, `"menuComponent"`> & { `menuTestId?`: `string` ; `onConfirm`: (`selection`: `MultiselectOption`[]) => `void` ; `onContentVisibilityChange?`: (`isVisible`: `boolean`) => `void` }
`context?`	`any`

Returns

null | ReactElement<any, any>

ConfirmationModal

▸ ConfirmationModal(props, context?): null | ReactElement<any, any>

Parameters

Name Type

props ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { canDrag?: boolean ; closeButtonAriaLabel?: string ; closeOnOutsideClick?: boolean ; colorScheme?: "dark" | "light" ; hasBackground?: boolean ; isOpen: boolean ; modalType?: ModalType ; onClose?: () => void ; padding?: "small" | "medium" | "compact" | "large" | "none" ; scrollbarsAriaLabel?: string ; sizeModifier?: "small" | "medium" | "compact" | "large" | "auto" ; testIdCloseButton?: string ; uniqueTitle?: string ; withCloseButton?: boolean ; withMask?: boolean ; withScrollbars?: boolean ; wrapperClassName?: string } & Pick<Omit<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { bgColor?: string ; colorScheme?: "dark" | "light" ; footerContent?: ReactElement<any, string | JSXElementConstructor<any>> ; footerPadding?: "small" | "medium" | "compact" | "large" | "none" ; hasBackground?: boolean ; headerContent?: ReactElement<any, string | JSXElementConstructor<any>> ; headerPadding?: "small" | "medium" | "compact" | "large" | "none" ; isRounded?: boolean ; isWithBorder?: boolean ; isWithShadow?: boolean ; padding?: "small" | "medium" | "compact" | "large" | "none" ; shadowModifier?: "dark" | "light" } & Pick<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { hasFooterShadow?: boolean ; padding?: "small" | "medium" | "compact" | "large" | "none" }, "hasFooterShadow">, "ref"> & RefAttributes<HTMLDivElement>, "hasFooterShadow" | "headerContent" | "footerContent" | "headerPadding" | "footerPadding"> & { cancelButtonTestid?: string ; cancelButtonText?: string ; confirmButtonTestid?: string ; confirmButtonText?: string ; description?: string ; descriptionWordBreak?: "normal" | "breakAll" | "keepAll" | "overflowWrap" ; isOpen: boolean ; onCancel?: (e?: SyntheticEvent<HTMLElement, Event>) => void ; onConfirm: (e?: SyntheticEvent<HTMLElement, Event>) => void ; title?: string }

context? any

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `canDrag?`: `boolean` ; `closeButtonAriaLabel?`: `string` ; `closeOnOutsideClick?`: `boolean` ; `colorScheme?`: `"dark"` \| `"light"` ; `hasBackground?`: `boolean` ; `isOpen`: `boolean` ; `modalType?`: `ModalType` ; `onClose?`: () => `void` ; `padding?`: `"small"` \| `"medium"` \| `"compact"` \| `"large"` \| `"none"` ; `scrollbarsAriaLabel?`: `string` ; `sizeModifier?`: `"small"` \| `"medium"` \| `"compact"` \| `"large"` \| `"auto"` ; `testIdCloseButton?`: `string` ; `uniqueTitle?`: `string` ; `withCloseButton?`: `boolean` ; `withMask?`: `boolean` ; `withScrollbars?`: `boolean` ; `wrapperClassName?`: `string` } & `Pick`<`Omit`<`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `bgColor?`: `string` ; `colorScheme?`: `"dark"` \| `"light"` ; `footerContent?`: `ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`>> ; `footerPadding?`: `"small"` \| `"medium"` \| `"compact"` \| `"large"` \| `"none"` ; `hasBackground?`: `boolean` ; `headerContent?`: `ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`>> ; `headerPadding?`: `"small"` \| `"medium"` \| `"compact"` \| `"large"` \| `"none"` ; `isRounded?`: `boolean` ; `isWithBorder?`: `boolean` ; `isWithShadow?`: `boolean` ; `padding?`: `"small"` \| `"medium"` \| `"compact"` \| `"large"` \| `"none"` ; `shadowModifier?`: `"dark"` \| `"light"` } & `Pick`<`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `hasFooterShadow?`: `boolean` ; `padding?`: `"small"` \| `"medium"` \| `"compact"` \| `"large"` \| `"none"` }, `"hasFooterShadow"`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`>, `"hasFooterShadow"` \| `"headerContent"` \| `"footerContent"` \| `"headerPadding"` \| `"footerPadding"`> & { `cancelButtonTestid?`: `string` ; `cancelButtonText?`: `string` ; `confirmButtonTestid?`: `string` ; `confirmButtonText?`: `string` ; `description?`: `string` ; `descriptionWordBreak?`: `"normal"` \| `"breakAll"` \| `"keepAll"` \| `"overflowWrap"` ; `isOpen`: `boolean` ; `onCancel?`: (`e?`: `SyntheticEvent`<`HTMLElement`, `Event`>) => `void` ; `onConfirm`: (`e?`: `SyntheticEvent`<`HTMLElement`, `Event`>) => `void` ; `title?`: `string` }
`context?`	`any`

Returns

null | ReactElement<any, any>

ContextMenu

▸ ContextMenu(props, context?): null | ReactElement<any, any>

ContextMenu will the show the "menu" component as a context menu when the user right clicks on the given child element.

Right or left-clicking outside the child element will close the context menu.

Parameters

Name	Type
`props`	`Object`
`props.children`	`ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`>>
`props.menu`	`ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`>> \| (`props`: { `onClose`: () => `void` }) => `ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`>>
`context?`	`any`

Returns

null | ReactElement<any, any>

CoreHeader

▸ CoreHeader(props, context?): null | ReactElement<any, any>

Parameters

Name Type

props ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { enhancerEnd?: ReactElement<any, string | JSXElementConstructor<any>> ; enhancerFixedWidth?: boolean ; enhancerMiddle?: ReactElement<any, string | JSXElementConstructor<any>> ; enhancerStart?: ReactElement<any, string | JSXElementConstructor<any>> ; hasBottomBorder?: boolean ; position?: "absolute" | "relative" ; size?: "small" | "medium" | "large" }

context? any

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `enhancerEnd?`: `ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`>> ; `enhancerFixedWidth?`: `boolean` ; `enhancerMiddle?`: `ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`>> ; `enhancerStart?`: `ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`>> ; `hasBottomBorder?`: `boolean` ; `position?`: `"absolute"` \| `"relative"` ; `size?`: `"small"` \| `"medium"` \| `"large"` }
`context?`	`any`

Returns

null | ReactElement<any, any>

CustomTooltip

▸ CustomTooltip(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Omit`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>, `HTMLDivElement`>, `"content"`> & `ControlledTooltip` & { `colorScheme?`: `"dark"` \| `"light"` ; `content`: `ReactNode` ; `isArrowShown?`: `boolean` ; `isHoverEnabled?`: `boolean` ; `mainWrapperClassName?`: `string` ; `position?`: `ExtendedTooltipPosition` ; `testIdInner?`: `string` ; `wrapperClassName?`: `string` }
`context?`	`any`

Returns

null | ReactElement<any, any>

Divider

▸ Divider(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `colorScheme?`: `"dark"` \| `"light"` ; `direction?`: `"horizontal"` \| `"vertical"` }
`context?`	`any`

Returns

null | ReactElement<any, any>

DragAndDrop

▸ DragAndDrop(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`PropsWithChildren`<{ `className?`: `string` ; `colorScheme`: `"dark"` \| `"light"` ; `hasError?`: `boolean` ; `isDisabled?`: `boolean` ; `onDragOver?`: (`e`: `DragEvent`<`HTMLDivElement`>) => `void` ; `onDrop?`: (`e`: `DragEvent`<`HTMLDivElement`>, `files?`: `File`[], `items?`: `DataTransferItem`[]) => `void` }>
`context?`	`any`

Returns

null | ReactElement<any, any>

DragAndUploadFiles

▸ DragAndUploadFiles(props): null | ReactElement<any, string | JSXElementConstructor<any>>

Parameters

Name Type

props { accept?: string ; ariaLabel?: string ; className?: string ; colorScheme?: "dark" | "light" ; hasError?: boolean ; isDisabled?: boolean ; multiple?: boolean ; onChange: ChangeEventHandler<HTMLInputElement> ; onDrop?: (e: DragEvent<HTMLDivElement>, files?: File[], items?: DataTransferItem[]) => void ; subTitle?: string ; title?: string } & RefAttributes<HTMLInputElement>

Name	Type
`props`	{ `accept?`: `string` ; `ariaLabel?`: `string` ; `className?`: `string` ; `colorScheme?`: `"dark"` \| `"light"` ; `hasError?`: `boolean` ; `isDisabled?`: `boolean` ; `multiple?`: `boolean` ; `onChange`: `ChangeEventHandler`<`HTMLInputElement`> ; `onDrop?`: (`e`: `DragEvent`<`HTMLDivElement`>, `files?`: `File`[], `items?`: `DataTransferItem`[]) => `void` ; `subTitle?`: `string` ; `title?`: `string` } & `RefAttributes`<`HTMLInputElement`>

Returns

null | ReactElement<any, string | JSXElementConstructor<any>>

Draggable

▸ Draggable(props): null | ReactElement<any, string | JSXElementConstructor<any>>

Parameters

Name Type

props Omit<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { alignWithFloatRootTrigger?: AlignWithFloatRootTrigger ; beforeReposition?: (element: HTMLDivElement) => void ; floatRoot?: RefObject<HTMLDivElement> ; isDisabled?: boolean ; lockStyle?: LockStyle ; onPointerMoveExtra?: (element: HTMLDivElement) => void ; onPointerUpExtra?: (element: HTMLDivElement) => void ; onReposition?: (element: HTMLDivElement, floatRootOverflow: FloatRootOverflow) => void ; pointerCapture?: boolean ; scrollElementRef?: RefObject<HTMLElement> ; scrollOffset?: number ; scrollTimer?: number ; shouldCaptureClick?: boolean }, "ref"> & RefAttributes<HTMLDivElement>

Name	Type
`props`	`Omit`<`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `alignWithFloatRootTrigger?`: `AlignWithFloatRootTrigger` ; `beforeReposition?`: (`element`: `HTMLDivElement`) => `void` ; `floatRoot?`: `RefObject`<`HTMLDivElement`> ; `isDisabled?`: `boolean` ; `lockStyle?`: `LockStyle` ; `onPointerMoveExtra?`: (`element`: `HTMLDivElement`) => `void` ; `onPointerUpExtra?`: (`element`: `HTMLDivElement`) => `void` ; `onReposition?`: (`element`: `HTMLDivElement`, `floatRootOverflow`: `FloatRootOverflow`) => `void` ; `pointerCapture?`: `boolean` ; `scrollElementRef?`: `RefObject`<`HTMLElement`> ; `scrollOffset?`: `number` ; `scrollTimer?`: `number` ; `shouldCaptureClick?`: `boolean` }, `"ref"`> & `RefAttributes`<`HTMLDivElement`>

Returns

null | ReactElement<any, string | JSXElementConstructor<any>>

DropContent

▸ DropContent(props, context?): null | ReactElement<any, any>

Parameters

Name Type

context? any

Name	Type
`props`	`Omit`<`DetailedHTMLProps`<`ButtonHTMLAttributes`<`HTMLButtonElement`>, `HTMLButtonElement`>, `"children"` \| `"content"`> & { `buttonClassName?`: `string` ; `buttonLabel?`: `string` ; `canCloseOutside?`: `boolean` ; `children?`: `ReactNode` \| (`isOpen`: `boolean`) => `ReactNode` ; `content`: `DropContentType` ; `contentClassName?`: `string` ; `dropContentLabel?`: `string` ; `dropContentRole?`: `string` ; `flexDirection?`: `"column"` \| `"row"` \| `"rowReverse"` \| `"columnReverse"` ; `interactiveElement?`: (`buttonProps`: `DetailedHTMLProps`<`ButtonHTMLAttributes`<`HTMLButtonElement`>, `HTMLButtonElement`>, `isContentVisible`: `boolean`) => `ReactNode` ; `isContentTextWrapped?`: `boolean` ; `isDisabled?`: `boolean` ; `isOpen?`: `boolean` ; `limitSize?`: `boolean` ; `onClose?`: () => `void` ; `onContainerClick?`: () => `void` ; `onContentVisibilityChange?`: (`isVisible`: `boolean`) => `void` ; `onOutsideClose?`: () => `void` ; `position?`: `"topRight"` \| `"topLeft"` \| `"bottomRight"` \| `"bottomLeft"` \| `"topMiddle"` \| `"bottomMiddle"` \| `"middleLeft"` \| `"middleRight"` }
`context?`	`any`

Returns

null | ReactElement<any, any>

Enhancers

▸ Enhancers(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`PropsWithChildren`<`EnhancerProps`>
`context?`	`any`

Returns

null | ReactElement<any, any>

ExpanderCell

▸ ExpanderCell(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`context?`	`any`

Returns

null | ReactElement<any, any>

FileUpload

▸ FileUpload(props): null | ReactElement<any, string | JSXElementConstructor<any>>

Parameters

Name	Type
`props`	{ `accept?`: `string` ; `ariaLabel?`: `string` ; `children?`: `ReactNode` ; `className?`: `string` ; `colorScheme`: `"dark"` \| `"light"` ; `id?`: `string` ; `isDisabled?`: `boolean` ; `multiple?`: `boolean` ; `onChange`: `ChangeEventHandler`<`HTMLInputElement`> ; `testId?`: `string` } & `RefAttributes`<`HTMLInputElement`>

Returns

null | ReactElement<any, string | JSXElementConstructor<any>>

Form

▸ Form(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`DetailedHTMLProps`<`FormHTMLAttributes`<`HTMLFormElement`>, `HTMLFormElement`>
`context?`	`any`

Returns

null | ReactElement<any, any>

FullSizeWindow

▸ FullSizeWindow(props): null | ReactElement<any, string | JSXElementConstructor<any>>

Parameters

Name	Type
`props`	`Object`

Returns

null | ReactElement<any, string | JSXElementConstructor<any>>

FullscreenLayout

▸ FullscreenLayout(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.children?`	`ReactNode`
`context?`	`any`

Returns

null | ReactElement<any, any>

FullscreenOverlay

▸ FullscreenOverlay(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.children?`	`ReactNode`
`context?`	`any`

Returns

null | ReactElement<any, any>

FullscreenSpinner

▸ FullscreenSpinner(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`context?`	`any`

Returns

null | ReactElement<any, any>

Grid

▸ Grid(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `hasCellVerticalGutter?`: `boolean` }
`context?`	`any`

Returns

null | ReactElement<any, any>

Group

▸ Group(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `justifyContent?`: `"center"` \| `"normal"` \| `"spaceBetween"` ; `modifier?`: `"fullWidth"` ; `spacing?`: `"small"` \| `"medium"` \| `"compact"` \| `"large"` \| `"none"` }
`context?`	`any`

Returns

null | ReactElement<any, any>

Heading

▸ Heading(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.className?`	`string`
`props.colorScheme?`	`"dark"` \| `"light"`
`props.padding?`	`"small"` \| `"medium"`
`props.subtitle?`	`string`
`props.title`	`string`
`props.titleFontVariant?`	`H1` \| `H2` \| `H3` \| `H4` \| `H5` \| `H6`
`props.titleHtmlTag?`	`"h1"` \| `"h2"` \| `"h3"` \| `"h4"` \| `"h5"` \| `"h6"`
`context?`	`any`

Returns

null | ReactElement<any, any>

Icon

▸ Icon(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`SVGProps`<`SVGSVGElement`> & { `colorScheme?`: `"dark"` \| `"light"` ; `size?`: `"small"` \| `"medium"` \| `"compact"` \| `"mini"` ; `source`: `IconSource` }
`context?`	`any`

Returns

null | ReactElement<any, any>

ImagePreviewButton

▸ ImagePreviewButton(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`PropsWithChildren`<`Object`>
`context?`	`any`

Returns

null | ReactElement<any, any>

InfoHeadCell

▸ InfoHeadCell(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.enhanceEnd?`	`ReactNode`
`props.enhanceStart?`	`ReactNode`
`props.title`	`string`
`context?`	`any`

Returns

null | ReactElement<any, any>

InfoMessage

▸ InfoMessage(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.className?`	`string`
`props.text?`	`string`
`context?`	`any`

Returns

null | ReactElement<any, any>

Input

▸ Input(props): null | ReactElement<any, string | JSXElementConstructor<any>>

Parameters

Name Type

props Omit<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & { ref?: null | (instance: null | HTMLInputElement) => void | RefObject<HTMLInputElement> }, "disabled"> & { clearButtonText?: string ; colorScheme?: "dark" | "light" ; enhancerEnd?: ReactNode ; enhancerStart?: ReactNode ; errorText?: string ; hasError?: boolean ; id?: string ; isDisabled?: boolean ; label: string ; labelModifier?: "hidden" | "inline" ; name: string ; onClear?: (value: string) => void ; onValueChange?: (value: string) => void ; showClearButton?: boolean ; sizeModifier?: "small" | "medium" ; testId?: string ; type?: TextLikeInputType ; value?: string ; variant?: "transparent" | "standard" }, "ref"> & RefAttributes<{ focus: () => void }>

Returns

null | ReactElement<any, string | JSXElementConstructor<any>>

InputLabel

▸ InputLabel(props, context?): null | ReactElement<any, any>

Parameters

Name Type

props Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & { ref?: null | (instance: null | HTMLLabelElement) => void | RefObject<HTMLLabelElement> } & { className?: string ; colorScheme?: "dark" | "light" ; fontVariant?: LabelFontVariant ; form?: string ; id?: string ; isLabelHidden?: boolean ; isLabelInline?: boolean ; isUppercase?: boolean ; text: string ; variant?: "danger" | "success" | "standard" | "hidden" | "warning" | "tinted" | "subtle" | "disabled" | "inherit" | "link" }

context? any

Returns

null | ReactElement<any, any>

InteractiveElement

▸ InteractiveElement(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`context?`	`any`

Returns

null | ReactElement<any, any>

KebabMenuButton

▸ KebabMenuButton(props, context?): null | ReactElement<any, any>

Parameters

Name Type

props PropsWithChildren<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children" | "content"> & { buttonClassName?: string ; buttonLabel?: string ; canCloseOutside?: boolean ; children?: ReactNode | (isOpen: boolean) => ReactNode ; content: DropContentType ; contentClassName?: string ; dropContentLabel?: string ; dropContentRole?: string ; flexDirection?: "column" | "row" | "rowReverse" | "columnReverse" ; interactiveElement?: (buttonProps: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, isContentVisible: boolean) => ReactNode ; isContentTextWrapped?: boolean ; isDisabled?: boolean ; isOpen?: boolean ; limitSize?: boolean ; onClose?: () => void ; onContainerClick?: () => void ; onContentVisibilityChange?: (isVisible: boolean) => void ; onOutsideClose?: () => void ; position?: "topRight" | "topLeft" | "bottomRight" | "bottomLeft" | "topMiddle" | "bottomMiddle" | "middleLeft" | "middleRight" }, "content"> & { buttonModifier?: "fullWidth" | "square" | "fluid" | "disc" ; buttonSize?: "small" | "medium" | "compact" | "large" | "none" ; buttonVariant?: "primary" | "secondary" | "tertiary" | "neutral" | "translucent" | "bordered" | "transparent" | "transparentAlternative" | "text" | "danger" | "dangerBordered" | "success" | "obvious" ; className?: string ; direction?: "horizontal" | "vertical" ; isDisabled?: boolean ; label?: string ; menuComponent: DropContentType ; menuPosition?: "topRight" | "topLeft" | "bottomRight" | "bottomLeft" | "topMiddle" | "bottomMiddle" | "middleLeft" | "middleRight" ; reactiveButtonStyles?: boolean }>

context? any

Returns

null | ReactElement<any, any>

LineHeading

▸ LineHeading(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.children`	`ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`>>
`context?`	`any`

Returns

null | ReactElement<any, any>

List

▸ List(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `spacing?`: `"small"` \| `"medium"` \| `"compact"` \| `"large"` \| `"none"` }
`context?`	`any`

Returns

null | ReactElement<any, any>

ListBoxLink

▸ ListBoxLink(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`context?`	`any`

Returns

null | ReactElement<any, any>

ListLink

▸ ListLink(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`context?`	`any`

Returns

null | ReactElement<any, any>

LoadingBox

▸ LoadingBox(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`PropsWithChildren`<`LoadingBoxProps`>
`context?`	`any`

Returns

null | ReactElement<any, any>

Logo

▸ Logo(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLImageElement`> & `ImgHTMLAttributes`<`HTMLImageElement`> & { `alt`: `string` ; `className?`: `string` ; `imageSrc`: `ImageSrc` }
`context?`	`any`

Returns

null | ReactElement<any, any>

▸ Menu(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.className?`	`string`
`props.colorScheme?`	`"dark"` \| `"light"`
`props.isAriaMultiSelectable?`	`boolean`
`props.menuContent`	`TitledMenuContent` \| `MenuContent`
`props.onPointerDownCapture?`	`PointerEventHandler`<`HTMLDivElement`>
`props.role?`	`AriaRole`
`props.tabIndex?`	`number`
`props.testId?`	`string`
`props.wrapperComponent?`	`FC`<`PropsWithChildren`<{ `className?`: `string` ; `colorScheme?`: `"dark"` \| `"light"` ; `testId?`: `string` }>>
`context?`	`any`

Returns

null | ReactElement<any, any>

MenuEntry

▸ MenuEntry(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.item`	`MenuItem`
`context?`	`any`

Returns

null | ReactElement<any, any>

▸ Modal(props, context?): null | ReactElement<any, any>

Parameters

Name Type

context? any

Returns

null | ReactElement<any, any>

ModalCloseButton

▸ ModalCloseButton(props, context?): null | ReactElement<any, any>

A generic close button for modals, tooltips and pill toasts.

Parameters

Name	Type
`props`	`Object`
`props.className?`	`string`
`props.colorScheme?`	`"dark"` \| `"light"`
`props.onClose?`	`ClickEventHandler`<`Element`, `Event`>
`context?`	`any`

Returns

null | ReactElement<any, any>

Multiselect

▸ Multiselect(props, context?): null | ReactElement<any, any>

Parameters

Name Type

props Omit<{ className?: string ; colorScheme?: "dark" | "light" ; dropContentPosition?: "topRight" | "topLeft" | "bottomRight" | "bottomLeft" | "topMiddle" | "bottomMiddle" | "middleLeft" | "middleRight" ; errorText?: string ; hasError?: boolean ; iconType?: IconSource ; isDisabled?: boolean ; isFullWidth?: boolean ; isOpen?: boolean ; isTruncated?: boolean ; label: string ; labelModifier?: "hidden" | "inline" ; menuComponent: DropContentType ; multipleSelectionText?: string ; noSelectionText?: string ; onContentVisibilityChange?: (isVisible: boolean) => void ; onOutsideClose?: () => void ; options: MultiselectOption[] ; sizeModifier?: "small" | "medium" | "compact" ; testId?: string ; value: undefined | string[] ; wrapContent?: boolean }, "menuComponent"> & { menuTestId?: string ; onSelectChange: (selection: MultiselectOption[]) => void }

context? any

Returns

null | ReactElement<any, any>

MultistepIndicator

▸ MultistepIndicator(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.className?`	`string`
`props.colorScheme?`	`"dark"` \| `"light"`
`props.currentStepIndex?`	`number`
`props.isStepNameHidden?`	`boolean`
`props.isStepNameTruncated?`	`boolean`
`props.onStepChange?`	(`stepNumber`: `number`) => `void`
`props.stepClassName?`	`string`
`props.steps`	`MultistepItem`[]
`props.variant?`	`"ordered-list"` \| `"line"`
`context?`	`any`

Returns

null | ReactElement<any, any>

NotificationToast

▸ NotificationToast(props, context?): null | ReactElement<any, any>

The NotificationToast component works like a normal toast, except it displays data received via a signal, and it stores the messages as an array, displaying one at a time.

Consumers can add a new message by doing:

    notificationToast.emit([{ message: 'My message' }]);

Parameters

Name	Type
`props`	`Partial`<`ToastProps`>
`context?`	`any`

Returns

null | ReactElement<any, any>

NotificationTooltip

▸ NotificationTooltip(props, context?): null | ReactElement<any, any>

Parameters

Name Type

props ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & ControlledTooltip & { closeButtonAriaLabel?: string ; colorScheme?: "dark" | "light" ; ctaFn?: () => void ; ctaText?: string ; header: ReactNode ; isArrowShown?: boolean ; mainWrapperClassName?: string ; modifier?: "fullWidth" ; position?: NotificationTooltipPosition ; shouldCloseOnOutsideClick?: boolean ; stopPointerDownPropagation?: boolean ; testIdCloseButton?: string ; testIdInner?: string ; text: string | ReactElement<any, string | JSXElementConstructor<any>> }

context? any

Returns

null | ReactElement<any, any>

NumberStepInput

▸ NumberStepInput(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.colorScheme?`	`"dark"` \| `"light"`
`props.isDisabled?`	`boolean`
`props.isInputReadOnly?`	`boolean`
`props.label`	`string`
`props.labelDecrement?`	`ReactNode`
`props.labelIncrement?`	`ReactNode`
`props.maxValue?`	`number`
`props.minValue?`	`number`
`props.name`	`string`
`props.onChange`	(`value`: `number`) => `void`
`props.value?`	`number`
`context?`	`any`

Returns

null | ReactElement<any, any>

Panel

▸ Panel(props, context?): null | ReactElement<any, any>

Parameters

Name Type

props { children?: ReactNode } & { fillHeight?: boolean ; overflowHidden?: boolean ; scrollElementRef?: RefObject<HTMLElement> } & Omit<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { bgColor?: string ; colorScheme?: "dark" | "light" ; footerContent?: ReactElement<any, string | JSXElementConstructor<any>> ; footerPadding?: "small" | "medium" | "compact" | "large" | "none" ; hasBackground?: boolean ; headerContent?: ReactElement<any, string | JSXElementConstructor<any>> ; headerPadding?: "small" | "medium" | "compact" | "large" | "none" ; isRounded?: boolean ; isWithBorder?: boolean ; isWithShadow?: boolean ; padding?: "small" | "medium" | "compact" | "large" | "none" ; shadowModifier?: "dark" | "light" } & Pick<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { hasFooterShadow?: boolean ; padding?: "small" | "medium" | "compact" | "large" | "none" }, "hasFooterShadow">, "ref"> & RefAttributes<HTMLDivElement>

context? any

Returns

null | ReactElement<any, any>

PasswordInput

▸ PasswordInput(props, context?): null | ReactElement<any, any>

The PasswordInput is a normal Input element that can toggle between password and text type with a show/hide button.

Parameters

Name Type

props Omit<Omit<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & { ref?: null | (instance: null | HTMLInputElement) => void | RefObject<HTMLInputElement> }, "disabled"> & { clearButtonText?: string ; colorScheme?: "dark" | "light" ; enhancerEnd?: ReactNode ; enhancerStart?: ReactNode ; errorText?: string ; hasError?: boolean ; id?: string ; isDisabled?: boolean ; label: string ; labelModifier?: "hidden" | "inline" ; name: string ; onClear?: (value: string) => void ; onValueChange?: (value: string) => void ; showClearButton?: boolean ; sizeModifier?: "small" | "medium" ; testId?: string ; type?: TextLikeInputType ; value?: string ; variant?: "transparent" | "standard" }, "ref"> & RefAttributes<{ focus: () => void }>, "type">

context? any

Returns

null | ReactElement<any, any>

PexipLogo

▸ PexipLogo(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`SVGProps`<`SVGSVGElement`> & { `colorScheme?`: `"dark"` \| `"light"` ; `position?`: `"absoluteCenter"` ; `size?`: `"small"` \| `"medium"` \| `"large"` \| `"full"` }
`context?`	`any`

Returns

null | ReactElement<any, any>

Pill

▸ Pill(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `closeButtonAriaLabel?`: `string` ; `colorScheme?`: `"dark"` \| `"light"` ; `isDanger?`: `boolean` ; `onClose?`: `ClickEventHandler`<`Element`, `Event`> ; `testIdCloseButton?`: `string` }
`context?`	`any`

Returns

null | ReactElement<any, any>

PopOutWindow

▸ PopOutWindow(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.children`	`ReactNode`
`props.onUnload?`	() => `void`
`props.remotePopOut?`	`Window`
`props.title?`	`string`
`context?`	`any`

Returns

null | ReactElement<any, any>

PreferenceInput

▸ PreferenceInput(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.className?`	`string`
`props.confirmLabel?`	`string`
`props.denyAlertText?`	`string`
`props.denyLabel?`	`string`
`props.errorText?`	`string`
`props.hasError?`	`boolean`
`props.id?`	`string`
`props.initialValue?`	`string`
`props.isConfirmDisabled?`	`boolean`
`props.isEditing?`	`boolean`
`props.isReadOnly?`	`boolean`
`props.label`	`string`
`props.labelEnhanceEnd?`	`ReactNode`
`props.modifyLabel?`	`string`
`props.name`	`string`
`props.onChange?`	(`e`: `ChangeEvent`<`HTMLInputElement`>) => `void`
`props.onConfirm?`	(`value?`: `string` \| `number`) => `void`
`props.onEditingStateChange?`	(`isEditing`: `boolean`) => `void`
`props.overrideInputValue?`	`string`
`props.placeholder?`	`string`
`props.shouldShowDenyAlert?`	`boolean`
`props.type?`	`"number"` \| `"text"` \| `"tel"` \| `"url"` \| `"email"` \| `"password"`
`context?`	`any`

Returns

null | ReactElement<any, any>

PreferenceMultiselect

▸ PreferenceMultiselect(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.className?`	`string`
`props.confirmLabel?`	`string`
`props.denyAlertText?`	`string`
`props.denyLabel?`	`string`
`props.errorText?`	`string`
`props.hasError?`	`boolean`
`props.isEditing?`	`boolean`
`props.isReadOnly?`	`boolean`
`props.label`	`string`
`props.labelEnhanceEnd?`	`ReactNode`
`props.modifyLabel?`	`string`
`props.noSelectionLabel?`	`string`
`props.onChange?`	(`selection`: `Option`[]) => `void`
`props.onConfirm?`	(`selection`: `Option`[]) => `void`
`props.options?`	`Option`[]
`props.shouldShowDenyAlert?`	`boolean`
`props.value?`	`string`[]
`context?`	`any`

Returns

null | ReactElement<any, any>

PreferenceRow

▸ PreferenceRow(props, context?): null | ReactElement<any, any>

Parameters

Name Type

props PropsWithChildren<PropsWithChildren<{ className?: string ; description?: ReactNode ; descriptionVariant?: "danger" | "success" | "standard" | "hidden" | "warning" | "tinted" | "subtle" | "disabled" | "inherit" | "link" ; label?: ReactNode ; labelVariant?: "danger" | "success" | "standard" | "hidden" | "warning" | "tinted" | "subtle" | "disabled" | "inherit" | "link" ; rowBottom?: ReactNode ; rowLeft?: ReactNode ; withBorderBottom?: boolean }>>

context? any

Returns

null | ReactElement<any, any>

PreferenceWrapper

▸ PreferenceWrapper(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.children?`	`ReactNode`
`props.className?`	`string`
`props.errorText?`	`string`
`props.hasError?`	`boolean`
`props.label`	`string`
`props.labelEnhanceEnd?`	`ReactNode`
`context?`	`any`

Returns

null | ReactElement<any, any>

ProgressBar

▸ ProgressBar(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `backgroundClassName?`: `string` ; `barClassName?`: `string` ; `barColor?`: `ProgressBarColor` ; `colorScheme?`: `"dark"` \| `"light"` ; `progress`: `number` }
`context?`	`any`

Returns

null | ReactElement<any, any>

RadioButton

▸ RadioButton(props): null | ReactElement<any, string | JSXElementConstructor<any>>

Parameters

Name Type

props Omit<Omit<HTMLProps<HTMLInputElement>, "disabled" | "name" | "type"> & { checked?: boolean ; className?: string ; colorScheme?: "dark" | "light" ; groupName?: string ; id?: string ; isDisabled?: boolean ; label: string ; labelModifier?: "hidden" | "default" | "spaced" ; labelPosition?: "end" | "start" ; onValueChange?: (selected: boolean) => void ; value: string }, "ref"> & RefAttributes<HTMLInputElement>

Returns

null | ReactElement<any, string | JSXElementConstructor<any>>

RangeSlider

▸ RangeSlider(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.className?`	`string`
`props.colorScheme?`	`"dark"` \| `"light"`
`props.max?`	`number`
`props.min?`	`number`
`props.onChange?`	(`e`: `ChangeEvent`<`HTMLInputElement`>) => `void`
`props.selectedValue?`	`number`
`props.step?`	`number`
`context?`	`any`

Returns

null | ReactElement<any, any>

RefButton

▸ RefButton(props): null | ReactElement<any, string | JSXElementConstructor<any>>

Parameters

Name	Type
`props`	`Object`

Returns

null | ReactElement<any, string | JSXElementConstructor<any>>

RefInteractiveElement

▸ RefInteractiveElement(props): null | ReactElement<any, string | JSXElementConstructor<any>>

Parameters

Name	Type
`props`	`Object`

Returns

null | ReactElement<any, string | JSXElementConstructor<any>>

RefSimpleButton

▸ RefSimpleButton(props): null | ReactElement<any, string | JSXElementConstructor<any>>

Parameters

Name	Type
`props`	`Object`

Returns

null | ReactElement<any, string | JSXElementConstructor<any>>

Row

▸ Row(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `spacing?`: `"small"` \| `"medium"` \| `"compact"` \| `"large"` \| `"none"` }
`context?`	`any`

Returns

null | ReactElement<any, any>

Scrim

▸ Scrim(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `position?`: `"bottom"` \| `"top"` }
`context?`	`any`

Returns

null | ReactElement<any, any>

Scrollbars

▸ Scrollbars(props): null | ReactElement<any, string | JSXElementConstructor<any>>

Parameters

Name	Type
`props`	`Omit`<`Props`, `"autoHide"`> & { `autoHide?`: `AutoHideBehavior` ; `children?`: `ReactNode` ; `className?`: `string` ; `onScroll?`: (`e`: `Event`) => `void` ; `scrollElementRef?`: `MutableRefObject`<`null` \| `HTMLElement`> } & `RefAttributes`<`default`>

Returns

null | ReactElement<any, string | JSXElementConstructor<any>>

Section

▸ Section(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLElement`> & `HTMLAttributes`<`HTMLElement`> & { `colorScheme?`: `"dark"` \| `"light"` ; `subtitle`: `ReactNode` ; `subtitleTestId?`: `string` ; `title`: `string` ; `titleTestId?`: `string` ; `variant?`: `"danger"` \| `"success"` \| `"standard"` \| `"hidden"` \| `"warning"` \| `"tinted"` \| `"subtle"` \| `"disabled"` \| `"inherit"` \| `"link"` }
`context?`	`any`

Returns

null | ReactElement<any, any>

SectionAccordion

▸ SectionAccordion(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.buttonClassName?`	`string`
`props.children?`	`ReactNode`
`props.className?`	`string`
`props.collapseText?`	`string`
`props.colorScheme?`	`"dark"` \| `"light"`
`props.expandText?`	`string`
`props.isExpanded?`	`boolean`
`props.onToggle?`	(`isOpen`: `boolean`) => `void`
`props.subtitle?`	`ReactNode`
`props.title`	`string`
`props.titleEnhancerEnd?`	`ReactNode`
`context?`	`any`

Returns

null | ReactElement<any, any>

Select

▸ Select(props, context?): null | ReactElement<any, any>

Parameters

Name Type

props Omit<Omit<DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & { ref?: null | (instance: null | HTMLSelectElement) => void | RefObject<HTMLSelectElement> }, "disabled"> & { colorScheme?: "dark" | "light" ; errorText?: string ; errorTextTestId?: string ; hasError?: boolean ; iconType?: IconSource ; id?: string ; isDisabled?: boolean ; isFullWidth?: boolean ; label: string ; labelModifier?: "hidden" | "inline" ; onValueChange: (id: string) => void ; options: Option[] ; sizeModifier?: "small" | "medium" | "compact" ; value: string ; wrapContent?: boolean }

context? any

Returns

null | ReactElement<any, any>

Sheet

▸ Sheet(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `closeButtonAriaLabel?`: `string` ; `isOpen`: `boolean` ; `onClose`: () => `void` ; `withCloseButton?`: `boolean` }
`context?`	`any`

Returns

null | ReactElement<any, any>

SimpleButton

▸ SimpleButton(props, context?): null | ReactElement<any, any>

SimpleButton looks and acts mostly the same as a normal Button except it has less features. The idea is to make it easy to do use composition (children components) to add desired behaviour.

Parameters

Name	Type
`props`	`Object`
`context?`	`any`

Returns

null | ReactElement<any, any>

SortingIndicator

▸ SortingIndicator(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`PropsWithChildren`<{ `isSortDescending?`: `boolean` ; `isSorted?`: `boolean` }>
`context?`	`any`

Returns

null | ReactElement<any, any>

Spinner

▸ Spinner(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `className?`: `string` ; `colorScheme?`: `"dark"` \| `"light"` ; `label?`: `string` ; `sizeModifier?`: `"small"` \| `"medium"` \| `"compact"` }
`context?`	`any`

Returns

null | ReactElement<any, any>

StatCard

▸ StatCard(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.colorScheme?`	`"dark"` \| `"light"` \| `"danger"`
`props.hasDivider?`	`boolean`
`props.rowBottom?`	`StatCardRow`
`props.rowTop`	`StatCardRow`
`props.shadowModifier?`	`"dark"` \| `"light"`
`context?`	`any`

Returns

null | ReactElement<any, any>

StatIndicator

▸ StatIndicator(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `color?`: `string` ; `size?`: `"small"` \| `"large"` ; `type?`: `"circle"` \| `"arrowUp"` \| `"arrowDown"` ; `variant?`: `"danger"` \| `"success"` \| `"busy"` \| `"warning"` }
`context?`	`any`

Returns

null | ReactElement<any, any>

StepNumber

▸ StepNumber(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `children?`: `undefined` ; `className?`: `string` ; `colorScheme?`: `"dark"` \| `"light"` ; `isActive?`: `boolean` ; `isCompleted?`: `boolean` ; `isDisabled?`: `boolean` ; `isFailed?`: `boolean` ; `stepNumber`: `string` }
`context?`	`any`

Returns

null | ReactElement<any, any>

SvgImage

▸ SvgImage(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`SVGProps`<`SVGSVGElement`> & { `colorScheme?`: `"dark"` \| `"light"` ; `size?`: `"small"` \| `"medium"` ; `source`: `ElementType`<`any`, keyof `IntrinsicElements`> }
`context?`	`any`

Returns

null | ReactElement<any, any>

Tab

▸ Tab(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `contentPadding?`: `"small"` \| `"medium"` \| `"compact"` \| `"large"` \| `"none"` ; `data-testid?`: `string` ; `tabEnhancerEnd?`: `ReactNode` ; `tabEnhancerStart?`: `ReactNode` ; `title`: `string` }
`context?`	`any`

Returns

null | ReactElement<any, any>

Table

▸ Table(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `hasPinnedColumns?`: `boolean` }
`context?`	`any`

Returns

null | ReactElement<any, any>

TableBody

▸ TableBody(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `hasInfinityScroll?`: `boolean` }
`context?`	`any`

Returns

null | ReactElement<any, any>

TableCell

▸ TableCell(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `isOnlyShownOnHover?`: `boolean` }
`context?`	`any`

Returns

null | ReactElement<any, any>

TableContent

▸ TableContent(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>, `HTMLDivElement`>
`context?`	`any`

Returns

null | ReactElement<any, any>

TableHead

▸ TableHead(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>, `HTMLDivElement`>
`context?`	`any`

Returns

null | ReactElement<any, any>

TableHeadCell

▸ TableHeadCell(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `isDisabled?`: `boolean` ; `isSorted?`: `boolean` }
`context?`	`any`

Returns

null | ReactElement<any, any>

TablePagination

▸ TablePagination(props, context?): null | ReactElement<any, any>

Parameters

Name	Type	Description
`props`	`Object`	-
`props.canNextPage`	`boolean`	-
`props.canPreviousPage`	`boolean`	-
`props.currentPageSize`	`number`	Number of entries for the current page.
`props.gotoPage`	(`updater`: `number` \| (`pageIndex`: `number`) => `number`) => `void`	-
`props.isDisabled?`	`boolean`	-
`props.isSticky?`	`boolean`	-
`props.isTablePopulated?`	`boolean`	-
`props.label`	`string`	-
`props.maxUngroupedPageButtons?`	`number`	Number of max visible page buttons before grouping.
`props.nextPage`	() => `void`	-
`props.nextPageButtonChildren?`	`ReactNode`	-
`props.pageIndex`	`number`	Current page number.
`props.pageSize`	`number`	Number of entries per page.
`props.previousPage`	() => `void`	-
`props.previousPageButtonChildren?`	`ReactNode`	-
`props.resultsCountComponent?`	`FC`<`TableResultsCountProps`>	-
`props.showResultsCount?`	`boolean`	-
`props.totalPagesCount?`	`number`	The total number of pages for the data shown in the table. Only needs to be supplied if the automatically calculated value should not be used.
`props.totalRows`	`number`	Sum of entries of all pages combined.
`context?`	`any`	-

Returns

null | ReactElement<any, any>

TableRow

▸ TableRow(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.children`	`ReactNode`
`props.className?`	`string`
`props.isDisabled?`	`boolean`
`props.isSelected?`	`boolean`
`props.style?`	`CSSProperties`
`context?`	`any`

Returns

null | ReactElement<any, any>

TableRowWrapper

▸ TableRowWrapper(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.children`	`ReactNode`
`props.className?`	`string`
`props.isDisabled?`	`boolean`
`props.isSelected?`	`boolean`
`props.style?`	`CSSProperties`
`context?`	`any`

Returns

null | ReactElement<any, any>

TableSection

▸ TableSection(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `position?`: `"middle"` \| `"left-pinned"` \| `"right-pinned"` }
`context?`	`any`

Returns

null | ReactElement<any, any>

Tabs

▸ Tabs(props, context?): null | ReactElement<any, any>

Parameters

Name Type

props ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { children: ReactElement<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { contentPadding?: "small" | "medium" | "compact" | "large" | "none" ; data-testid?: string ; tabEnhancerEnd?: ReactNode ; tabEnhancerStart?: ReactNode ; title: string }, string | JSXElementConstructor<any>> | (false | ReactElement<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { contentPadding?: "small" | "medium" | "compact" | "large" | "none" ; data-testid?: string ; tabEnhancerEnd?: ReactNode ; tabEnhancerStart?: ReactNode ; title: string }, string | JSXElementConstructor<any>>)[] ; colorScheme?: "dark" | "light" ; customTabNameComponent?: FC<ClassAttributes<HTMLButtonElement> & ButtonHTMLAttributes<HTMLButtonElement>> ; data-testid?: string ; hasDivider?: boolean ; initialActiveTabIndex?: number ; noTabButtonPadding?: boolean ; onActiveTabChange?: (activeTabIndex: number) => void }

context? any

Returns

null | ReactElement<any, any>

Tag

▸ Tag(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`PropsWithChildren`<`TagItem`>
`context?`	`any`

Returns

null | ReactElement<any, any>

▸ TagList(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`PropsWithChildren`<{ `className?`: `string` ; `colorScheme?`: `"dark"` \| `"light"` ; `items`: `TagItem`[] ; `maxTagsCount?`: `number` ; `variant?`: `"danger"` \| `"success"` \| `"standard"` \| `"hidden"` \| `"warning"` \| `"tinted"` \| `"subtle"` \| `"disabled"` \| `"inherit"` \| `"link"` }>
`context?`	`any`

Returns

null | ReactElement<any, any>

Text

▸ Text(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`context?`	`any`

Returns

null | ReactElement<any, any>

TextArea

▸ TextArea(props): null | ReactElement<any, string | JSXElementConstructor<any>>

Parameters

Name Type

props Omit<Omit<Omit<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & { ref?: null | (instance: null | HTMLTextAreaElement) => void | RefObject<HTMLTextAreaElement> }, "disabled"> & { colorScheme?: "dark" | "light" ; errorText?: string ; hasError?: boolean ; id?: string ; isDisabled?: boolean ; isLabelHidden?: boolean ; label: string ; name: string ; onValueChange?: (value: string) => void ; resize?: ResizeVariant ; rows?: number ; value?: string }, "ref"> & RefAttributes<{ focus: () => void }>

Returns

null | ReactElement<any, string | JSXElementConstructor<any>>

TextHeading

▸ TextHeading(props, context?): null | ReactElement<any, any>

Parameters

Name Type

props ClassAttributes<HTMLHeadingElement> & HTMLAttributes<HTMLHeadingElement> & { className?: string ; colorScheme?: "dark" | "light" ; fontVariant?: FontVariant ; htmlTag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" ; isTruncated?: boolean ; isUppercase?: boolean ; variant?: "danger" | "success" | "standard" | "hidden" | "warning" | "tinted" | "subtle" | "disabled" | "inherit" | "link" }

context? any

Returns

null | ReactElement<any, any>

TextLink

▸ TextLink(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`context?`	`any`

Returns

null | ReactElement<any, any>

ThemeConsumer

▸ ThemeConsumer(props): null | ReactElement<any, string | JSXElementConstructor<any>>

Parameters

Name	Type
`props`	`ConsumerProps`<`ThemeContextProps`>

Returns

null | ReactElement<any, string | JSXElementConstructor<any>>

ThemeProvider

▸ ThemeProvider(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`PropsWithChildren`<`ThemeContextProps`>
`context?`	`any`

Returns

null | ReactElement<any, any>

Toast

▸ Toast(props): null | Element

Parameters

Name	Type
`props`	`ToastProps` & `WithTransitionProps`

Returns

null | Element

ToggleSwitch

▸ ToggleSwitch(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Omit`<`ToggleSwitchProps`, `"style"` \| `"type"`>
`context?`	`any`

Returns

null | ReactElement<any, any>

▸ Tooltip(props, context?): null | ReactElement<any, any>

Parameters

Name Type

props ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { closeDelay?: number ; colorScheme?: "dark" | "light" ; delay?: number ; isTooltipEnabled?: boolean ; position?: "left" | "right" | "bottom" | "top" | "topRight" | "topLeft" | "bottomRight" | "bottomLeft" | "topStart" | "bottomStart" | "endBottom" ; text: ReactNode ; tooltipContainerClassName?: string }

context? any

Returns

null | ReactElement<any, any>

URLToLink

▸ URLToLink(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.text`	`string`
`context?`	`any`

Returns

null | ReactElement<any, any>

User

▸ User(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.avatarType`	`AvatarType`
`props.className?`	`string`
`props.colorScheme?`	`"dark"` \| `"light"`
`props.displayName`	`string`
`props.email?`	`string`
`props.imageUrl?`	`string`
`props.order?`	`"text-right"` \| `"text-left"`
`props.size?`	`"small"` \| `"medium"` \| `"compact"` \| `"large"`
`props.textItemClassName?`	`string`
`props.usernameFontVariant?`	`FontVariant`
`context?`	`any`

Returns

null | ReactElement<any, any>

UserMenuButton

▸ UserMenuButton(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`Object`
`props.colorScheme`	`"dark"` \| `"light"`
`props.displayName?`	`string`
`props.isContentVisible`	`boolean`
`props.isDisabled?`	`boolean`
`props.modifier?`	`"fullWidth"` \| `"square"` \| `"fluid"` \| `"disc"`
`props.title?`	`string`
`props.variant?`	`"primary"` \| `"secondary"` \| `"tertiary"` \| `"neutral"` \| `"translucent"` \| `"bordered"` \| `"transparent"` \| `"transparentAlternative"` \| `"text"` \| `"danger"` \| `"dangerBordered"` \| `"success"` \| `"obvious"`
`context?`	`any`

Returns

null | ReactElement<any, any>

UserMenuDropContent

▸ UserMenuDropContent(props, context?): null | ReactElement<any, any>

Parameters

Name Type

props Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children" | "content"> & { buttonClassName?: string ; buttonLabel?: string ; canCloseOutside?: boolean ; children?: ReactNode | (isOpen: boolean) => ReactNode ; content: DropContentType ; contentClassName?: string ; dropContentLabel?: string ; dropContentRole?: string ; flexDirection?: "column" | "row" | "rowReverse" | "columnReverse" ; interactiveElement?: (buttonProps: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, isContentVisible: boolean) => ReactNode ; isContentTextWrapped?: boolean ; isDisabled?: boolean ; isOpen?: boolean ; limitSize?: boolean ; onClose?: () => void ; onContainerClick?: () => void ; onContentVisibilityChange?: (isVisible: boolean) => void ; onOutsideClose?: () => void ; position?: "topRight" | "topLeft" | "bottomRight" | "bottomLeft" | "topMiddle" | "bottomMiddle" | "middleLeft" | "middleRight" } & { colorScheme?: "dark" | "light" ; displayName?: string ; isDisabled?: boolean ; modifier?: "fullWidth" | "square" | "fluid" | "disc" ; onContentVisibilityChange?: (isVisible: boolean) => void ; title?: string ; tooltipPosition?: "left" | "right" | "bottom" | "top" | "topRight" | "topLeft" | "bottomRight" | "bottomLeft" | "topStart" | "bottomStart" | "endBottom" ; variant?: "primary" | "secondary" | "tertiary" | "neutral" | "translucent" | "bordered" | "transparent" | "transparentAlternative" | "text" | "danger" | "dangerBordered" | "success" | "obvious" }

context? any

Returns

null | ReactElement<any, any>

Video

▸ Video(props): null | ReactElement<any, string | JSXElementConstructor<any>>

Parameters

Name Type

props Omit<ClassAttributes<HTMLVideoElement> & VideoHTMLAttributes<HTMLVideoElement> & { autoPlay?: boolean ; captionsSrc?: string ; captionsSrcLang?: string ; isMirrored?: boolean ; onFailedToResume?: FailedToResume ; onPictureInPictureChange?: (isPip: boolean) => void ; playsInline?: boolean ; sinkId?: string ; srcObject?: MediaStream ; textTrackKind?: "captions" | "subtitles" }, "ref"> & RefAttributes<VideoHandle>

Returns

null | ReactElement<any, string | JSXElementConstructor<any>>

VideoWrapper

▸ VideoWrapper(props): null | ReactElement<any, string | JSXElementConstructor<any>>

Parameters

Name Type

props Omit<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { alignItems?: "center" | "stretch" | "flex-end" | "flex-start" ; background?: "none" | "light" | "primary" | "secondary" | "black" ; border?: boolean ; borderRadius?: "none" | "box" ; flexDirection?: "column" | "row" ; isFullHeight?: boolean ; isFullWidth?: boolean ; justifyContent?: "center" | "flex-end" | "flex-start" ; size?: "small" | "medium" | "large" | "full" }, "ref"> & RefAttributes<HTMLDivElement>

Returns

null | ReactElement<any, string | JSXElementConstructor<any>>

Wrapper

▸ Wrapper(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
`props`	`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & { `borderRadius?`: `"none"` \| `"box"` ; `heightModifier?`: `"autoHeight"` ; `justifyContent?`: `"center"` \| `"flexStart"` ; `modifier?`: `"fullWidth"` \| `"mediumWidth"` ; `size?`: `"small"` \| `"medium"` \| `"large"` \| `"full"` }
`context?`	`any`

Returns

null | ReactElement<any, any>

isBackgroundImageSrcEmpty

▸ isBackgroundImageSrcEmpty(backgroundImageSrc): boolean

Parameters

Name	Type
`backgroundImageSrc`	`undefined` \| `BackgroundImageSrc`

Returns

boolean

isImageSrcEmpty

▸ isImageSrcEmpty(imageSrc): boolean

Parameters

Name	Type
`imageSrc`	`undefined` \| `ImageSrc`

Returns

boolean

isImageSrcString

▸ isImageSrcString(imageSrc): imageSrc is string

Parameters

Name	Type
`imageSrc`	`undefined` \| `ImageSrc`

Returns

imageSrc is string

onEnter

▸ onEnter<E, T>(callback): (e: KeyboardEvent<E>) => void

Type parameters

Name	Type
`E`	extends `HTMLElement`<`E`>
`T`	extends (`e`: `SyntheticEvent`<`E`, `Event`>) => `void`

Parameters

Name	Type
`callback`	`T`

Returns

fn

▸ (e): void

Parameters

Name	Type
`e`	`KeyboardEvent`<`E`>

Returns

void

useBreakpointChange

▸ useBreakpointChange(): Signal<undefined>

Returns

Signal<undefined>

useGroupedPagesNav

▸ useGroupedPagesNav(«destructured»): GroupedPageNav[]

Parameters

Name	Type
`«destructured»`	`Object`
› `groupChunkSize?`	`number`
› `pageIndex`	`number`
› `totalPagesCount`	`number`

Returns

GroupedPageNav[]

useInput

▸ useInput(props): [string, Omit<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & { ref?: null | (instance: null | HTMLInputElement) => void | RefObject<HTMLInputElement> }, "disabled"> & { clearButtonText?: string ; colorScheme?: "dark" | "light" ; enhancerEnd?: ReactNode ; enhancerStart?: ReactNode ; errorText?: string ; hasError?: boolean ; id?: string ; isDisabled?: boolean ; label: string ; labelModifier?: "hidden" | "inline" ; name: string ; onClear?: (value: string) => void ; onValueChange?: (value: string) => void ; showClearButton?: boolean ; sizeModifier?: "small" | "medium" ; testId?: string ; type?: TextLikeInputType ; value?: string ; variant?: "transparent" | "standard" }, "ref"> & RefAttributes<{ focus: () => void }>]

Parameters

Name Type

Returns

[string, Omit<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & { ref?: null | (instance: null | HTMLInputElement) => void | RefObject<HTMLInputElement> }, "disabled"> & { clearButtonText?: string ; colorScheme?: "dark" | "light" ; enhancerEnd?: ReactNode ; enhancerStart?: ReactNode ; errorText?: string ; hasError?: boolean ; id?: string ; isDisabled?: boolean ; label: string ; labelModifier?: "hidden" | "inline" ; name: string ; onClear?: (value: string) => void ; onValueChange?: (value: string) => void ; showClearButton?: boolean ; sizeModifier?: "small" | "medium" ; testId?: string ; type?: TextLikeInputType ; value?: string ; variant?: "transparent" | "standard" }, "ref"> & RefAttributes<{ focus: () => void }>]

useLandscape

▸ useLandscape(): boolean

Returns

boolean

useLg

▸ useLg(): boolean

Returns

boolean

useLgDown

▸ useLgDown(): boolean

Returns

boolean

useLgUp

▸ useLgUp(): boolean

Returns

boolean

useMd

▸ useMd(): boolean

Returns

boolean

useMdDown

▸ useMdDown(): boolean

Returns

boolean

useMdToXl

▸ useMdToXl(): boolean

Returns

boolean

useMdUp

▸ useMdUp(): boolean

Returns

boolean

useMobileDevice

▸ useMobileDevice(): boolean

Returns

boolean

useMultistepIndicator

▸ useMultistepIndicator(«destructured»): readonly [{ allStepsCompleted: boolean ; currentStepIndex: number ; prevStepsCompleted: boolean ; steps: MultistepItem[] }, { moveToStep: (stepIndex: number, __namedParameters: { forceStep?: boolean }) => void ; resetAllSteps: () => void ; resetStep: (stepIndex: number) => void ; updateStepActive: (stepIndex: number, isActive: boolean) => void ; updateStepCompleted: (stepIndex: number, __namedParameters: { activateStep?: boolean ; isCompleted?: boolean ; isSelectable?: boolean }) => void ; updateStepDisabled: (stepIndex: number, isDisabled: boolean) => void ; updateStepFailed: (stepIndex: number, __namedParameters: { activateStep?: boolean ; isFailed?: boolean ; isSelectable?: boolean }) => void ; updateStepLeave: (stepIndex: number, __namedParameters: { activateStep?: boolean ; isSelectable?: boolean }) => void }]

Convenience hook for using steps in MultistepIndicator

Parameters

Name	Type
`«destructured»`	`Object`
› `currentStepIndex?`	`number`
› `initialSteps`	`MultistepItem`[]

Returns

readonly [{ allStepsCompleted: boolean ; currentStepIndex: number ; prevStepsCompleted: boolean ; steps: MultistepItem[] }, { moveToStep: (stepIndex: number, __namedParameters: { forceStep?: boolean }) => void ; resetAllSteps: () => void ; resetStep: (stepIndex: number) => void ; updateStepActive: (stepIndex: number, isActive: boolean) => void ; updateStepCompleted: (stepIndex: number, __namedParameters: { activateStep?: boolean ; isCompleted?: boolean ; isSelectable?: boolean }) => void ; updateStepDisabled: (stepIndex: number, isDisabled: boolean) => void ; updateStepFailed: (stepIndex: number, __namedParameters: { activateStep?: boolean ; isFailed?: boolean ; isSelectable?: boolean }) => void ; updateStepLeave: (stepIndex: number, __namedParameters: { activateStep?: boolean ; isSelectable?: boolean }) => void }]

usePortrait

▸ usePortrait(): boolean

Returns

boolean

useScrollIntoView

▸ useScrollIntoView(element, options?): () => void

Parameters

Name	Type
`element`	`RefObject`<`HTMLElement`>
`options`	`Object`
`options.delay?`	`number`
`options.scrollIntoViewOptions?`	`Partial`<`ScrollIntoViewOptions`>

Returns

fn

▸ (): void

Returns

void

useSm

▸ useSm(): boolean

Returns

boolean

useSmDown

▸ useSmDown(): boolean

Returns

boolean

useSmToLg

▸ useSmToLg(): boolean

Returns

boolean

useSmToXl

▸ useSmToXl(): boolean

Returns

boolean

useSmUp

▸ useSmUp(): boolean

Returns

boolean

useTabletDevice

▸ useTabletDevice(): boolean

Returns

boolean

useTabs

▸ useTabs(activeTabIndex): Object

Parameters

Name	Type
`activeTabIndex`	`number`

Returns

Object

Name	Type
`activeTab`	`number`
`setActiveTab`	`Dispatch`<`SetStateAction`<`number`>>

useTouchDevice

▸ useTouchDevice(): boolean

Returns

boolean

useXl

▸ useXl(): boolean

Returns

boolean

useXlDown

▸ useXlDown(): boolean

Returns

boolean

useXlUp

▸ useXlUp(): boolean

Returns

boolean

useXs

▸ useXs(): boolean

Returns

boolean

withColorScheme

▸ withColorScheme<P>(Component, colorScheme): (props: P) => Element

Type parameters

Name	Type
`P`	extends `object`

Parameters

Name	Type
`Component`	`ComponentType`<`P`>
`colorScheme`	`"dark"` \| `"light"`

Returns

fn

▸ (props): Element

Parameters

Name	Type
`props`	`P`

Returns

Element

withTabName

▸ withTabName<P>(Component, componentProps?): (props: P & ClassAttributes<HTMLButtonElement> & ButtonHTMLAttributes<HTMLButtonElement>) => Element

Type parameters

Name
`P`

Parameters

Name	Type
`Component`	`ComponentType`<`P`>
`componentProps?`	`P`

Returns

fn

▸ (props): Element

Parameters

Name	Type
`props`	`P` & `ClassAttributes`<`HTMLButtonElement`> & `ButtonHTMLAttributes`<`HTMLButtonElement`>

Returns

Element

withTransition

▸ withTransition<P>(Component, timeout): (props: P & WithTransitionProps) => null | Element

Type parameters

Name	Type
`P`	extends `object`

Parameters

Name	Type
`Component`	`ComponentType`<`P`>
`timeout`	`number`

Returns

fn

▸ (props): null | Element

Parameters

Name	Type
`props`	`P` & `WithTransitionProps`

Returns

null | Element

Enumerations
Interfaces
Type Aliases
Variables
Functions

Enumerations​

Interfaces​

Type Aliases​

ActivityCardAction​

Type declaration​

AlignWithFloatRootTrigger​

AllSize​

AriaMenuItem​

Type declaration​

BackgroundImageSrc​

BadgeCounterProps​

BadgeCounterVariant​

BaseSizeModifier​

BreadcrumbItem​

Type declaration​

ButtonHTMLTag​

ButtonModifiersValues​

ButtonProps​

ButtonTextProps​

ButtonVariant​

ColorScheme​

DropContentPosition​

DropContentType​

ExtendedSizeModifier​

ExtendedTooltipPosition​

FullSizeWindowBackgroundVariant​

FullSizeWindowColorBackgroundProps​

Type declaration​

FullSizeWindowImageBackgroundProps​

Type declaration​

GroupProps​

HeadingElement​

HeadingFontVariant​

IScrollbars​

ImageSrc​

InlineElement​

InputVariant​

InteractiveElementHTMLTag​

InteractiveElementProps​

LabelModifier​

LinkTarget​

LogoSizeModifier​

MenuAction​

Type declaration​

MenuContent​

MenuItem​

Type declaration​

ModalProps​

ModalSizeModifier​

MultiselectOption​

MultistepIndicatorProps​

NotificationToastMessage​

Type declaration​

NotificationToastSignal​

NotificationTooltipPosition​

Option​

Type declaration​

OverlayOpacity​

SelectProps​

ShadowModifier​

SimpleButtonProps​

SizeModifier​

StandardSizeModifier​

StatIndicatorVariant​

StatusItem​

Type declaration​

TableResultsCountProps​

Type declaration​

TagItem​

Type declaration​

TextLinkProps​

TextProps​

TextVariant​

ToastPosition​

TooltipPosition​

VideoWrapperSizeModifier​

VideoWrapperVariant​

Variables​

IconTypes​

TooltipPositionValue​

Enumerations

Interfaces

Type Aliases

ActivityCardAction

Type declaration

AlignWithFloatRootTrigger

AllSize

AriaMenuItem

Type declaration

BackgroundImageSrc

BadgeCounterProps

BadgeCounterVariant

BaseSizeModifier

BreadcrumbItem

Type declaration

ButtonHTMLTag

ButtonModifiersValues

ButtonProps

ButtonTextProps

ButtonVariant

ColorScheme

DropContentPosition

DropContentType

ExtendedSizeModifier

ExtendedTooltipPosition

FullSizeWindowBackgroundVariant

FullSizeWindowColorBackgroundProps

Type declaration

FullSizeWindowImageBackgroundProps

Type declaration

GroupProps

HeadingElement

HeadingFontVariant

IScrollbars

ImageSrc

InlineElement

InputVariant

InteractiveElementHTMLTag

InteractiveElementProps

LabelModifier

LinkTarget

LogoSizeModifier

MenuAction

Type declaration

MenuContent

MenuItem

Type declaration

ModalProps

ModalSizeModifier

MultiselectOption

MultistepIndicatorProps

NotificationToastMessage

Type declaration

NotificationToastSignal

NotificationTooltipPosition

Option

Type declaration

OverlayOpacity

SelectProps

ShadowModifier

SimpleButtonProps

SizeModifier

StandardSizeModifier

StatIndicatorVariant

StatusItem

Type declaration

TableResultsCountProps

Type declaration

TagItem

Type declaration

TextLinkProps

TextProps

TextVariant

ToastPosition

TooltipPosition

VideoWrapperSizeModifier

VideoWrapperVariant

Variables

IconTypes

TooltipPositionValue